<template>
  <div class="background"></div>
  <div style="width: 60%;margin: 0 auto;">
    
    <el-result v-if="isError"
               icon="error"
               title="无权访问"
               sub-title="此用户没有访问该页面的权限"
    >
      <template #extra>
        <el-button type="primary" size="medium" @click="backIndex">回到首页</el-button>
      </template>
    </el-result>
    <div v-else>
      <div>欢迎您，管理员编号：{{managerId}}</div>
      <div class="title">
        申请列表
      </div>
      <ApplyList></ApplyList>
    </div>
    
  </div>

<!--  <div id="wangeditor">-->
<!--    <div ref="editorElem" style="text-align:left;"></div>-->
<!--  </div>-->
<!--  <el-button type="primary" @click="content">buttonCont</el-button>-->
  
</template>

<script>
import ApplyList from "./components/ApplyList";
import E from "wangeditor";

export default {
  name: "App",
  created() {
    this.managerId = localStorage.getItem("managerId");
    if(this.managerId==null){
      this.isError = true;
    }else {
      this.isError = false;
    }
  },
  // mounted() {
  //   this.editor = new E(this.$refs.editorElem);
  //   // 编辑器的事件，每次改变会获取其html内容
  //   this.editor.config.onchange = html => {
  //     this.editorContent = html;
  //   };
  //   this.editor.config.menus = [
  //     // 菜单配置
  //     'head', // 标题
  //     'bold', // 粗体
  //     'fontSize', // 字号
  //     'fontName', // 字体
  //     'italic', // 斜体
  //     'underline', // 下划线
  //     'strikeThrough', // 删除线
  //     'foreColor', // 文字颜色
  //     'backColor', // 背景颜色
  //     'link', // 插入链接
  //     'list', // 列表
  //     'justify', // 对齐方式
  //     'quote', // 引用
  //     'emoticon', // 表情
  //     'image', // 插入图片
  //     'table', // 表格
  //     'code', // 插入代码
  //     'undo', // 撤销
  //     'redo' // 重复
  //   ];
  //   this.editor.create(); // 创建富文本实例
  // },
  data(){
    return{
      isError: false,
      managerId: null,
      editor: null,
      editorContent: ''
    }
  },
  methods:{
    backIndex(){
      window.open('/index','_self');
    },
    content(){
      console.log(this.editorContent);
    }
  },
  components:{
    ApplyList
  }
}
</script>

<style scoped>
.title{
  font-family: 黑体,serif;
  font-size: 36px;
  color: #1E90FF;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
.background{
  background-image: url(../assets/background.png);
  /*background-repeat:no-repeat ;*/
  background-size:100% 100%;
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: fixed;
  bottom: 0;
  opacity: 0.3;
}
</style>